<template>
  <a-card :tab-list="tabListTitle"
          v-bind="$attrs"
          :active-tab-key="activeKey"
          @tabChange="onTabChange">
    <!-- 资料汇交数 Tab 内容 -->
    <template v-if="activeKey === 'tab1'">
      <a-row :gutter="16"> <!-- gutter：列间距，单位 px -->
        <!-- 左列：各月汇交数（近一年） -->
        <a-col :span="12"> <!-- span=12：占一行的 1/2 宽度 -->
          <VisitAnalysis />
        </a-col>
        <!-- 右列：各部门资料排行 -->
        <a-col :span="12">
          <VisitAnalysis2 />
        </a-col>
      </a-row>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Card as ACard, Row, Col } from 'ant-design-vue'; // 引入栅格组件
import VisitAnalysis from './VisitAnalysis.vue';
import VisitAnalysis2 from './VisitAnalysis2.vue';

const activeKey = ref('tab1');

const tabListTitle = [
  {
    key: 'tab1',
    tab: '资料汇交数',
  },
];

function onTabChange(key: string) {
  activeKey.value = key;
}
</script>

<style scoped>
/* 可选：调整 Card 内边距，让布局更紧凑 */
.ant-card-body {
  padding: 16px;
}
</style>